<script setup>
import { Plus, Search, UploadFilled } from '@element-plus/icons-vue'
import { ref } from 'vue'
import caseService from '@/api/case/index.js'
import fundPoolService from '@/api/finance/fundPool.js'
import { useDict } from '@/utils/dict.js'
import SvgIcon from '@/components/SvgIcon/index.vue'

const visible = defineModel('visible', {
  required: true,
  default: false,
})
const options = defineModel('drawOptions', {
  type: Object,
  default: () => ({
    disabled: false,
  }),
})
const title = defineModel('title')
const tabsList = reactive([
  {
    label: '基本信息',
    name: 'first',
    icon: 'tab-first',
    id: 1,
  },
  {
    label: '流程信息',
    name: 'second',
    icon: 'tab-second',
    id: 2,
  },
  {
    label: '附件',
    name: 'third',
    icon: 'tab-third',
    id: 3,
  },
])
// 发明人表格
const inventorColumns = reactive([
  {
    field: 'inventorName',
    title: '名称',
    align: 'center',
    slots: { default: 'inventorName' },
  },
  {
    field: 'inventorIdentity',
    title: '身份证号码/护照/台胞证编号',
    align: 'center',
    slots: { default: 'inventorIdentity' },
  },
  {
    field: 'inventorOrder',
    title: '顺序',
    align: 'center',
    slots: { default: 'inventorOrder' },
  },
  {
    field: 'operate',
    title: '操作',
    align: 'center',
    width: 200,
    slots: { default: 'operate' },
  },
])
const activeName = ref('first')
const viewForm = ref(null)
const fileFormRef = ref(null)
const editForm = ref({
  reelNumber: '',
  patentId: '',
  contractNo: '',
  customerId: '',
  contractId: '',
  patentName: '',
  patentType: '',
  businessName: '',
  status: '',
  remark: '',
  engineerId: '',
  submitcompanyId: '',
  patentpersonId: [],
  caseType: '',
  patentLinkman: '',
  linkmanMail: '',
  linkmanPhone: '',
  inventorList: [],
})
const customerList = ref([])
const engineerList = ref([])
const companyQueryList = ref([])
const stepList = ref([])
// 查询
const attachmentForm = ref({
  patentId: '',
  fileType: '',
})
// 上传表单
const uploadForm = ref({
  patentId: '',
  fileType: '',
  fileList: [],
  file: '',
})
const { sys_case_show, sys_patent_status, patent_file_type, sys_case_type }
    = useDict(
      'sys_proceeds_time',
      'sys_pay_status',
      'sys_patent_status',
      'sys_case_show',
      'patent_file_type',
      'sys_case_type',
    )
onMounted(() => {
  getDefaultData()
})

function getDefaultData() {
  fundPoolService.optionList().then((res) => {
    customerList.value = res.data
  })
  caseService.EngineerList().then((response) => {
    engineerList.value = response.data
  })
  caseService.CompanyQueryList().then((response) => {
    companyQueryList.value = response.data
  })
}
function handleActiveName(name) {
  activeName.value = name
}

function handleAddInfo() {

}
function handleReset() {
  visible.value = false
  title.value = ''
}
</script>

<template>
  <el-drawer
    v-model="visible"
    :destroy-on-close="true"
    class="custom-drawer"
    :show-close="false"
    size="60%"
    @close="handleReset"
  >
    <template #header>
      <div class="dialog-header">
        <span class="relative top-3 text-[16px]">
          {{ title }}
        </span>
      </div>
    </template>
    <div class="content-tabs mb-5">
      <ul class="flex">
        <li
          v-for="item in tabsList"
          :key="item.id"
          class="flex-1 text-center rounded h-13 flex-center text-[16px] tabs-item"
          :class="{ active: activeName === item.name }"
          @click="handleActiveName(item.name)"
        >
          <span>
            <SvgIcon
              :name="item.icon"
              class="tabs-icon"
              class-name="mr-1 w-[21px] h-[21px] relative top-[1px]"
            />
          </span>
          {{ item.label }}
        </li>
      </ul>
    </div>
    <transition name="el-fade-in-linear">
      <div v-if="activeName === 'first'">
        <el-form
          ref="viewForm"
          :model="editForm"
          label-width="120px"
          disabled
          class="mt-3"
        >
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="案件编号" prop="reelNumber">
                <el-input
                  v-model="editForm.reelNumber"
                  placeholder="请输入案件编号"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="合同编号" prop="contractNo">
                <el-input
                  v-model="editForm.contractNo"
                  placeholder="请输入合同编号"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="客户名称" prop="customerId">
                <el-select
                  v-model="editForm.customerId"
                  filterable
                  clearable
                  placeholder="请选择客户"
                >
                  <el-option
                    v-for="item in customerList"
                    :key="item.customerId"
                    :label="item.customerName"
                    :value="item.customerId"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form label-width="120px">
                <el-form-item label="案件名称" prop="patentName">
                  <el-input
                    v-model="editForm.patentName"
                    placeholder="请输入案件名称"
                    clearable
                  />
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="8">
              <el-form-item label="业务类型" prop="businessName">
                <el-input
                  v-model="editForm.businessName"
                  placeholder="请输入业务类型"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="状态" prop="status">
                <el-select
                  v-model="editForm.status"
                  placeholder="请选择状态"
                  clearable
                >
                  <el-option
                    v-for="dict in sys_patent_status"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="分配人员" prop="engineerId">
                <el-select
                  v-model="editForm.engineerId"
                  clearable
                  filterable
                  placeholder="请选择分配人员"
                >
                  <el-option
                    v-for="item in engineerList"
                    :key="item.userId"
                    :label="item.userName"
                    :value="item.userId"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="专利权人" prop="patentpersonId">
                <el-select
                  v-model="editForm.patentpersonId"
                  filterable
                  clearable
                  multiple
                  placeholder="请选择专利权人"
                >
                  <el-option
                    v-for="item in customerList"
                    :key="item.customerId"
                    :label="item.customerName"
                    :value="item.customerId"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form label-width="120px">
                <el-form-item label="备注" prop="remark">
                  <el-input
                    v-model="editForm.remark"
                    type="textarea"
                    :rows="3"
                    placeholder="请输入备注"
                    maxlength="200"
                    show-word-limit
                    clearable
                    class="w-full"
                  />
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
          <div class="linear-header my-7">
            <span>专利信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="递交端口" prop="submitcompanyId">
                <el-select
                  v-model="editForm.submitcompanyId"
                  clearable
                  filterable
                  placeholder="请选择递交端口"
                >
                  <el-option
                    v-for="item in companyQueryList"
                    :key="item.submitcompanyId"
                    :label="item.submitcompanyName"
                    :value="item.submitcompanyId"
                  />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="案件方式" prop="caseType">
                <el-select
                  v-model="editForm.caseType"
                  placeholder="请选择案件方式"
                  clearable
                >
                  <el-option
                    v-for="dict in sys_case_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="专利联系人电话" prop="linkmanPhone" label-width="121px">
                <el-input
                  v-model="editForm.linkmanPhone"
                  placeholder="请输入专利联系人电话"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="专利联系人" prop="patentLinkman">
                <el-input
                  v-model="editForm.patentLinkman"
                  placeholder="请输入专利联系人"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="专利联系人邮箱" prop="linkmanMail" label-width="121px">
                <el-input
                  v-model="editForm.linkmanMail"
                  placeholder="请输入专利联系人邮箱"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="申请日期" prop="applicationTime">
                <el-input
                  v-model="editForm.applicationTime"
                  placeholder="请输入申请日期"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="专利申请号" prop="applicationNumber">
                <el-input
                  v-model="editForm.applicationNumber"
                  placeholder="请输入专利申请号"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="专利号" prop="certificateNumber">
                <el-input
                  v-model="editForm.certificateNumber"
                  placeholder="请输入专利号"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 发明人信息 -->
          <!-- <el-divider content-position="center">
          <span style="color: #0e6cff; font-size: 18px; font-weight: bold">
            发明人信息
          </span>
        </el-divider> -->
          <div class="linear-header my-7">
            <span>发明人信息</span>
          </div>
          <el-form label-width="120px">
            <div style="margin-bottom: 15px">
              <el-button
                type="primary"
                plain
                :disabled="true"
                @click="handleAddInfo"
              >
                新增
                <el-icon class="el-icon--right">
                  <Plus />
                </el-icon>
              </el-button>
            </div>
            <vxe-grid
              :data="editForm.inventorList"
              :columns="inventorColumns"
              border
              header-cell-class-name="headerCellContractClass"
            >
              <template #inventorName="{ row }">
                <el-input
                  v-model="row.inventorName"
                  placeholder="请输入名称"
                  :disabled="options.disabled"
                  clearable
                />
              </template>
              <template #inventorIdentity="{ row }">
                <el-input
                  v-model="row.inventorIdentity"
                  :disabled="true"
                  placeholder="请输入身份证号码/护照/台胞证编号"
                  clearable
                />
              </template>
              <template #inventorOrder="{ row }">
                <el-input-number
                  v-model="row.inventorOrder"
                  placeholder="请输入顺序"
                  :disabled="options.disabled"
                  clearable
                  :min="0"
                />
              </template>
              <template #operate="{ row }">
                <!--                <el-button -->
                <!--                  type="danger" -->
                <!--                  :disabled="disabled" -->
                <!--                  size="small" -->
                <!--                  @click="handleDeleteInfo(row, $index)" -->
                <!--                > -->
                <!--                  删除 -->
                <!--                </el-button> -->
              </template>
            </vxe-grid>
          </el-form>
        </el-form>
      </div>
    </transition>
    <transition name="el-fade-in-linear">
      <div v-if="activeName === 'second'">
        <el-steps
          v-if="stepList.length > 0"
          direction="vertical"
          :active="stepList.length"
          :align-center="true"
        >
          <el-step
            v-for="item in stepList"
            :key="item.recordId"
            :title="item.contractStatus"
            status="finish"
          >
            <template #icon>
              <div
                class="rounded-full w-3 h-3 bg-[var(--el-color-primary)]"
              />
            </template>
            <template #title>
              <div style="display: flex;flex-direction: row-reverse;justify-content: flex-end;">
                <span v-if="item.auditStatus" style="margin-left: 10px">[{{ item.auditStatus === 0 ? "不通过" : "通过" }}]</span>
                <dict-tag
                  :options="sys_patent_status"
                  :value="item.contractStatus"
                />
              </div>
            </template>
            <template #description>
              <div class="my-2 w-130">
                <div
                  class="description-title flex bg-[var(--el-color-primary)] rounded text-white text-[14px] py-2 w-full"
                >
                  <div class="flex-1 flex-center">
                    操作人
                  </div>
                  <div class="flex-1 flex-center">
                    审核意见
                  </div>
                  <div class="flex-1 flex-center">
                    操作时间
                  </div>
                </div>
                <div
                  class="description-item flex bg-[#E8F2FF] rounded text-black text-[14px] py-2 w-full"
                >
                  <div class="flex-1 flex-center w-20">
                    {{ item.operUserNickName }} [{{ item.operUserName }}]
                  </div>
                  <div class="flex-1 flex-center">
                    {{ item.auditSuggest }}
                  </div>
                  <div class="flex-1 flex-center">
                    {{ item.operTime }}
                  </div>
                </div>
              </div>
              <!--                <div> -->
              <!--                  <span>操作人：</span> -->
              <!--                  <span>{{ item.operUserNickName }} [{{ item.operUserName }}]</span> -->
              <!--                </div> -->
              <!--                <div v-if="item.auditSuggest"> -->
              <!--                  <span>审核意见：</span> -->
              <!--                  <span>{{ item.auditSuggest }}</span> -->
              <!--                </div> -->
              <!--                <span>{{ item.operTime }}</span> -->
              <!--                <div /> -->
              <!--              </div> -->
            </template>
          </el-step>
        </el-steps>
        <el-empty v-else :image-size="200" />
      </div>
    </transition>
    <transition name="el-fade-in-linear">
      <div v-if="activeName === 'third'">
        <el-form
          ref="fileFormRef"
          class="file-form"
          :model="attachmentForm"
        >
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="类型" prop="fileType">
                <el-select
                  v-model="attachmentForm.fileType"
                  clearable
                  filterable
                  placeholder="请选择类型"
                >
                  <el-option
                    v-for="dict in patent_file_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-button type="primary" @click="handleQueryAtt">
                查询
                <el-icon class="el-icon--right">
                  <Search />
                </el-icon>
              </el-button>
            </el-col>
          </el-row>
        </el-form>
        <el-button
          type="primary"
          plain
          style="margin-bottom: 8px"
          :disabled="disabled"
          @click="handleUpload(2)"
        >
          上传
          <el-icon><UploadFilled /></el-icon>
        </el-button>
        <vxe-grid
          :data="infoList"
          :columns="uploadColumns"
          border
          header-cell-class-name="headerCellContractClass"
        >
          <template #fileType="{ row }">
            <dict-tag :options="patent_file_type" :value="row.fileType" />
          </template>

          <template #operate="{ row }">
            <el-button
              v-if="fileView(row)"
              text
              type="primary"
              size="small"
              @click="FilePreviewDialogHandle(row)"
            >
              预览
            </el-button>
            <el-button type="success" text size="small" @click="handleDownloadAtt(row)">
              下载
            </el-button>
            <el-button
              v-if="fileDelete(row)"
              size="small"
              type="danger"
              text
              @click="handleDeleteAtt(row)"
            >
              删除
            </el-button>
            <!-- <el-button
              v-else-if="
                gcsId === myId
                  && row.fileType === '2'
                  && row.isDelFileRole === '1'
              "
              size="small"
              type="danger"
              text="danger"
              @click="handleDeleteAtt(row)"
            >
              删除
            </el-button>
            <el-button
              v-else-if="
                row.fileType === '2' && row.isDelFileRole === '1'
              "
              size="small"
              type="danger"
              text
              @click="handleDeleteAtt(row)"
            >
              删除
            </el-button> -->
          </template>
        </vxe-grid>
      </div>
    </transition>
    <div class="close-btn flex-center" @click="handleReset">
      <el-icon>
        <CloseBold />
      </el-icon>
    </div>
    <template #footer>
      <div class="flex-center mt-[20px]">
        <el-button type="primary" @click="editSubmitForm">
          确 定
        </el-button>
        <el-button @click="cancel">
          取 消
        </el-button>
      </div>
    </template>
  </el-drawer>
</template>

<style lang="scss" scoped>

</style>
